<template>
    <FormDrawer ref="formDrawerRef" title="设置商品详情" @submit="submit" destroy-on-close>
        <el-form :model="form" label-width="80px" :inline="false" size="normal">
            <el-form-item label="轮播图">
                <Editor v-model="form.content"/>
            </el-form-item>
        </el-form>
    </FormDrawer>
</template>

<script setup>
import { readGoods, editGoods } from "~/api/goods.js"
import { reactive, ref } from 'vue'
import { toast } from '~/composables/util.js';
import FormDrawer from '~/components/FormDrawer.vue';
import Editor from '~/components/Editor.vue';

const formDrawerRef = ref(null)
const goodsId = ref(0)
const form = reactive({
    content:""
})

const open = (row) => {
    goodsId.value = row.id
    row.contentLoading = true
    readGoods(goodsId.value).then(res => {
        form.content = res.content
        formDrawerRef.value.open()
    }).finally(() => {
        row.contentLoading = false
    })

}
const emit = defineEmits(["reloadData"])
const submit = () => {
    formDrawerRef.value.showLoading()
    editGoods(goodsId.value, form)
        .then(res => {
            toast("设置商品详情成功")
            formDrawerRef.value.close()
            emit("reloadData")
        }).finally(() => { formDrawerRef.value.hideLoading() })
}

defineExpose({
    open
})
</script>